大前端

1.2.4 使用 antd form 遇到的问题

直接使用 antd 的 form,

import React, { Component } from 'react';
// import {Route} from 'react-router-dom';
import { Form, Icon, Input, Button, Checkbox } from 'antd';

import './login.less';

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            top: 60
        };
    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login-container">
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <Form.Item>
                        {getFieldDecorator('userName', {
                            rules: [{ required: true, message: 'Please input your username!' }]
                        })(<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />)}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: 'Please input your Password!' }]
                        })(<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />)}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('remember', {
                            valuePropName: 'checked',
                            initialValue: true
                        })(<Checkbox>Remember me</Checkbox>)}
                        {/* <a className="login-form-forgot" href="">
                            Forgot password
                        </a> */}
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            Log in
                        </Button>
                        {/* Or <a href="">register now!</a> */}
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

Form.create({ name: 'login' })(Login)

export default Login;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

这样写就报一个错误

TypeError: Cannot read property 'getFieldDecorator' of undefined
1

之后看到有人 issue 中提到

component Contato should be wrapped by Form.create()(), so change L53 to export default Form.create()(Contato)

# 组件要被 Form.create()() 包裹，最后暴露出 export default Form.create()(Contato)
1
2
3

修改组件代码

import React, { Component } from 'react';
// import {Route} from 'react-router-dom'
import { Form, Icon, Input, Button, Checkbox } from 'antd';

import './login.less';

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            top: 60
        };
    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login-container">
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <Form.Item>
                        {getFieldDecorator('userName', {
                            rules: [{ required: true, message: 'Please input your username!' }]
                        })(<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />)}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: 'Please input your Password!' }]
                        })(<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />)}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('remember', {
                            valuePropName: 'checked',
                            initialValue: true
                        })(<Checkbox>Remember me</Checkbox>)}
                        {/* <a className="login-form-forgot" href="">
                            Forgot password
                        </a> */}
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            Log in
                        </Button>
                        {/* Or <a href="">register now!</a> */}
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default Form.create({ name: 'login' })(Login);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

虽然不报错了,可是点击登录没有验证，有报错了

handleSubmit Cannot read property 'props' of undefined
1
  • 解决
import React, { Component } from 'react';
import logo from '../../logo.svg';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import './login.less';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      top: 60
    };
    this.getFieldProps = props.form.getFieldProps;
    this.getFieldError = props.form.getFieldError;
    this.isFieldValidating = props.form.isFieldValidating;
    this.validateFields = props.form.validateFields;
    this.getFieldValue = props.form.getFieldValue;
  }
  handleSubmit(e) {
    e.preventDefault();
    console.log(this.props);
    this.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
      
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="login-container">
        <img src={logo} className="App-logo" alt="logo" />
        <Form onSubmit={this.handleSubmit.bind(this)} className="login-form">
          <Form.Item>
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: 'Please input your username!' }]
            })(<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />)}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: 'Please input your Password!' }]
            })(<Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />)}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: true
            })(<Checkbox>Remember me</Checkbox>)}
            {/* <a className="login-form-forgot" href="">
              Forgot password
            </a> */}
            <Button type="primary" htmlType="submit" className="login-form-button">
              Log in
            </Button>
            {/* Or <a href="">register now!</a> */}
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Form.create({ name: 'login' })(Login);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

参考

← 1.2.5 Create-react-app+Antd+Less配置 →